<template>
  <div
    class="addressMenuList"
    :style="isManage ? 'height: calc(100vh - 200px)' : ''"
  >
    <h1 class="title">
      <!-- <svg-icon
        icon-class="address"
        class="w-30px h-30px align-middle"
      ></svg-icon> -->
      通讯录
    </h1>
    <el-scrollbar class="scrollbar" wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="MenuIndex"
        class="el-menu-vertical-demo"
        @select="selectmenu"
      >
        <el-menu-item
          v-for="(item, index) in addressList"
          :index="String(index)"
          @click="menuClick(item)"
          class="justify-center"
          style="padding: 0"
        >
          {{ item.deptName }}</el-menu-item
        >
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const props = defineProps({
  addressList: {
    type: Array,
    required: true
  },
  isManage: {
    type: Boolean
  }
})

const MenuIndex = ref('0')

// function setIndex(index) {
//   MenuIndex.value = index
// }

function selectmenu(index) {
  MenuIndex.value = index
}
defineExpose({ selectmenu })
const emit = defineEmits(['menuClick'])
function menuClick(item) {
  emit('menuClick', item)
}
</script>

<style scoped lang="scss">
.addressMenuList {
  border-radius: 10px;
  position: relative;
  padding-top: 70px;
  height: calc(100vh - 70px);
  overflow-y: auto;
  border: 1px solid #ddd;

  .title {
    @apply h-70px flex items-center bg-#3379cc justify-center color-white mt-0 absolute top-0;
    width: 100%;
  }
}
</style>
